{% extends "admin/base.html" %}

{% load i18n admin_tags %}

{% block title %}{% trans "Tags" %}{% endblock %}

{% block content %}
    <div class="text-left">
        <h4 class="p-3">{% trans "Tags" %}</h4>
    </div>
    <form action="{% url list_url %}" method="post">
      {% csrf_token %}

        <div class="row px-3">
          <div class="col-6">
              <select name="action" required="">
                <option value="" selected="">---------</option>
                <option value="delete_selected">{% trans "Delete selected tags" %}</option>
              </select>
              <button class="btn btn-outline-dark mx-1" type="submit">{% trans "Go" %}</button>
          </div>
          {% if pages|length > 1  %}
            <nav class="col-6" aria-label="Page navigation">
              <ul class="pagination justify-content-end">
                {% if page.has_previous %}
                  <li class="page-item">
                    <a class="page-link" href="?page={{ page.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                {% endif %}
                {% for i in pages %}
                  <li class="page-item {% if i == page_number %} active {% endif %}"><a class="page-link" href="?page={{ i }}">{{i}}</a></li>
                {% endfor %}
                {% if page.has_next %}
                  <li class="page-item">
                    <a class="page-link" href="?page={{ page.next_page_number }}" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                {% endif %}
              </ul>
            </nav>
          {% endif %}
        </div>

        <div class="col-12">
          {% if object_list|length > 0 %}
            <table class="table table-striped">
              <thead class="thead-dark">
                <tr class="text-uppercase">
                  <th>
                    <div id="checkbox_view">
                      <span class="mr-2"><input type="checkbox" id="action_toggle"></span>{% trans "Tag Name" %}
                    </div>
                  </th>
                  <th>{% trans "Pinned?" %}</th>
                  <th>{% trans "Description" %}</th>
                </tr>
              </thead>
              <tbody>
                {% for tag in object_list %}
                  <tr>
                    <td>
                      <span class="mr-2">
                        <input type="checkbox" name="_selected_action" value="{{ tag.id }}" />
                      </span>
                      <a href="{% url 'admin:tag_change' tag.id %}" style="background: {{ tag.bg_color }};color: {{ tag.fg_color }}; margin: 1rem 0; padding: 0.25rem 0.5rem; border-radius: 0.5rem;">
                           {{ tag.name }}
                      </a></td>
                    <td><span class="mr-2">
                      {% boolean_icon tag.pinned %}
                    </td>                      
                    <td><span class="mr-2">{{ tag.description |default:'' | safe | truncatechars:96}}
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          {% else %}
            {% trans "No tag so far" %}
          {% endif %}
      </div>
    </form>
{% endblock %}